<html>
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <link rel="stylesheet" href="../css/bootstrap.min.css"/>
    <script src="../js/jquery.min.js"></script>
    <script src="../js/bootstrap.min.js"></script>
    <!--导入js组件vue的类库-->
    <script type="application/javascript" src="../js/vue.min.js"></script>
    <title>汽车分类</title>
</head>
<body>
<div class="row" style="width:98%;margin-left: 1%;">
    <div class="col-xs-12 col-sm-12 col-md-12 col-lg-12">
        <div class="panel panel-default">
            <div class="panel-heading">
                汽车类型
            </div>
            <div class="panel-body">
                <div class="row">
                    <div class="col-xs-5 col-sm-5 col-md-5 col-lg-5">
                        <div class="form-group form-inline">
                            <span>汽车类型</span>
                            <input type="text" name="username" class="form-control">
                        </div>
                    </div>
                    <div class="col-xs-5 col-sm-5 col-md-5 col-lg-5">
                        <div class="form-group form-inline">
                            <span>汽车名称</span>
                            <input type="text" name="pubdate" class="form-control">
                        </div>
                    </div>
                    <div class="col-xs-2 col-sm-2 col-md-2 col-lg-2">
                        <button type="button" class="btn btn-primary" id="search"><span
                                class="glyphicon glyphicon-search"></span></button>
                    </div>
                </div>
                <div style="height: 400px;overflow: scroll;">
                    <table id="tb_list" class="table table-striped table-hover table-bordered">
                        <tr>
                            <td>序号</td>
                            <td>车辆名称</td>
                            <td>车辆类型</td>
                            <td>车辆库存</td>
                            <td>操作</td>
                        </tr>

                        <tr v-for="ca in car">
                            <td>{{ca.id}}</td>
                            <td>{{ca.name}}</td>
                            <td>{{ca.type}}</td>
                            <td>{{ca.number}}</td>
                            <td>
                                <button @click="edit(ca.id)">修改</button>
                                |
                                <button @click="del(ca.id)">删除</button>
                            </td>
                        </tr>


                    </table>
                    <!--修改模态窗体-->
                    <div class="modal fade" id="modalModify2">
                        <div class="modal-dialog" >
                            <div class="modal-content">
                                <div class="modal-header">
                                    <button type="button" class="close" data-dismiss="modal">X</button>
                                    <h4 class="modal-title">车辆信息修改：</h4>
                                </div>
                                <div class ="modal-body" >
                                    <div class="input-group">
                                        <span class="input-group-addon">车辆ID:</span>
                                        <input class="input-sm" type="text" id="id" placeholder="1" v-model="CarInfos.id"/>
                                    </div>
                                    <br/>
                                    <div class="input-group">
                                        <span class="input-group-addon">车辆名称:</span>
                                        <input class="input-sm" type="text" id="name" placeholder="1" v-model="CarInfos.name"/>
                                    </div>
                                    <br/>
                                    <div class="input-group">
                                        <span class="input-group-addon">车辆库存:</span>
                                        <input class="input-sm" type="text" id="number" placeholder="1" v-model="CarInfos.number"/>
                                    </div>
                                    <br/>
                                    <div class="input-group">
                                        <span class="input-group-addon">车辆类型:</span>
                                        <input class="input-sm" type="text" id="type" placeholder="1" v-model="CarInfos.type"/>
                                    </div>
                                </div>
                                <div class = "modal-footer">
                                    <button type="button" class="btn btn-default" data-dismiss ="modal">取消</button>
                                    <button type="button" class="btn btn-primary" id="modify">修改</button>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>

        </div>
    </div>

</div>
<script>
    var cars = new Vue({
        el:'#modalModify2',
        data:{
            CarInfos:[

            ]
        }
    });
    var carInfo = new Vue({
        el:'#tb_list',
        data:{
              car:[

              ]
        },
        methods:{
            edit:function(id){
                $.ajax({
                    url:'getCarInfoById/'+id,
                    type:'get',
                    dataType:'json',
                    success:function(res){
                        if(res.statusCode==200){
						    console.log(res.data);
                            cars.CarInfos = res.data;  //将id查询的对象赋予和模态狂绑定数据
                            $("#modalModify2").modal("show");//显示模态框
                        }
                    }
                });
            },
            del:function (id) {
                $.ajax({
                    url:'delCars?id='+id,
                    type:"delete",
                    dataType:'json',
                    success:function(res){
                        if(res.statusCode==200){
                            alert(res.msg);
                            loadCars();//重新加载数据
                        }
                    }
                });
            }
        }
    });

    $(function () {
        loadCars();
    });

    function loadCars() {
        $.ajax({
            url: 'getCars',   //请求路径
            type: 'GET',  //请求方式
//			data:'',  //请求的数据
            dataType: 'json',  //响应的数据类型
            success: function (res) {
                carInfo.car = res;
            }
        });
    }
    //    修改关闭模态窗体
    $("#modify").click(function(){
        $.ajax({
            url:'modify',
            type:'PUT',
            data: JSON.stringify(cars.CarInfos),  //将json对象转为json字符串
            contentType:'application/json',
            dataType:'json',
            success:function(res){
                if(res.statusCode==200){
                    alert(res.msg);
                    $("#modalModify2").modal("hide");//关闭模态框
                    loadCars();//重新加载数据
                }
            }
        });

    })
</script>
</body>
</html>